import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    ScrollView
} from 'react-native';


const {height, width} = Dimensions.get('window');
export default class PersonalDataPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLose:false,
            isRepayment:true
        }
    };

    render() {
        const {data}=this.props;
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <Text style={styles.titleMsg}>个人资料</Text>
                    <TouchableOpacity
                        onPress={()=>Actions.pop()}
                        style={styles.goBackView}>
                        <Image
                            source={ImageUtil.GoBack}
                            style={styles.goBackImg}/>
                    </TouchableOpacity>
                </View>
                <ScrollView style={{height:height-64}}>
                    <View style={styles.dataView}>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>姓        名</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.name}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>身份证号</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.idCard}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>手机号码</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.phone}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>户口地址</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.address}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>所在地区</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>{data.area}</Text>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>借款日期</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>2017年8月20日</Text>
                            <Text style={styles.labelMsg}>借款金额</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <View style={{height:40,width:80,justifyContent:'center',alignItems:'center'}}>
                                <Text style={{fontSize:27/2, color:'#646464'}}>{data.borrowingMoney}</Text>
                            </View>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>还款日期</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <Text style={styles.labelInformationMsg}>2017年9月20日</Text>
                            <Text style={styles.labelMsg}>还款金额</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            <View style={{height:40,width:80,justifyContent:'center',alignItems:'center'}}>
                                <Text style={{fontSize:27/2, color:'#646464'}}>{data.repaymentMoney}</Text>
                            </View>
                        </View>
                        <View style={styles.labelView}>
                            <Text style={styles.labelLabellingMsg}>是否失联</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            {data.isRepayment
                            ?(<Image
                                    source={ImageUtil.Lose}
                                    style={styles.judgmentImg}/>)
                            :(<Image
                                    source={ImageUtil.NoLose}
                                    style={styles.judgmentImg}/>)}
                            <Text style={{marginLeft:13/2,marginRight:6,color:'#646464',fontSize:27/2}}>已失联</Text>
                            {data.isRepayment
                                ?(<Image
                                    source={ImageUtil.NoLose}
                                    style={styles.judgmentImg}/>)
                                :(<Image
                                    source={ImageUtil.Lose}
                                    style={styles.judgmentImg}/>)}
                            <Text style={{marginLeft:13/2,marginRight:6,color:'#646464',fontSize:27/2}}>未失联</Text>
                        </View>
                        <View style={[styles.labelView,{borderBottomWidth:0}]}>
                            <Text style={styles.labelLabellingMsg}>是否还款</Text>
                            <Text style={styles.symbolMsg}>:</Text>
                            {data.isPublic
                            ?(<Image
                                    source={ImageUtil.Lose}
                                    style={styles.judgmentImg}/>)
                            :(<Image
                                    source={ImageUtil.NoLose}
                                    style={styles.judgmentImg}/>)}
                            <Text style={{marginLeft:13/2,marginRight:6,color:'#646464',fontSize:27/2}}>已还款</Text>
                            {data.isPublic
                                ?(<Image
                                    source={ImageUtil.NoLose}
                                    style={styles.judgmentImg}/>)
                                :(<Image
                                    source={ImageUtil.Lose}
                                    style={styles.judgmentImg}/>)}
                            <Text style={{marginLeft:13/2,marginRight:6,color:'#646464',fontSize:27/2}}>未还款</Text>
                        </View>
                    </View>
                    <View>
                        <Text style={{marginTop:18,marginLeft:15,marginBottom:13,fontSize:27/2}}>备注</Text>
                    </View>
                    <View style={styles.remarkView}>
                        <Text style={styles.remarkMsg}>请输入此人借款情况描述</Text>
                        <View style={styles.allImgView}>
                            <Image style={styles.remarkImg}/>
                        </View>
                    </View>
                    <View style={{height:40}}/>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        height:64,
        backgroundColor:'#ffffff',
        alignItems:'center',
        borderBottomWidth:1,
        borderColor:'#e4e4e4'
    },
    titleMsg:{
        fontSize:17,
        color:'#000000',
        marginTop:67/2
    },
    goBackView:{
        position: 'absolute',
        top:65/2,left:15,
    },
    goBackImg:{
        height:18,
        width:18
    },
    backgroundImg:{
        marginTop:112,
        height:185,
        width:185
    },
    dataView:{
        backgroundColor:'#ffffff',
        marginTop:10,
        alignItems:'center',
        borderBottomWidth:1,
        borderColor:'#cacaca'
    },
    labelView:{
        flexDirection:'row',
        alignItems:'center',
        width:width-30,
        height:44,
        borderBottomWidth:1,
        borderColor:'#e2e2e2'
    },
    labelLabellingMsg:{
        fontSize:27/2,
        color:'#000000'
    },
    symbolMsg:{
        marginLeft:10,
        fontSize:27/2
    },
    labelInformationMsg:{
        marginLeft:17,
        fontSize:27/2,
        color:'#646464'
    },
    remarkView:{
        backgroundColor:'#ffffff',
        borderRadius:5,
        width:345,
        marginLeft:15,
        height:150
    },
    remarkMsg:{
        marginTop:14,
        marginLeft:18,
        fontSize:27/2,
        color:'#b2b2b2',
        width:width-66,
    },
    allImgView:{
        position: 'absolute',
        bottom:10,left:13,
        flexDirection:'row'
    },
    remarkImg:{
        marginLeft:10,
        height:64,
        width:64,
        backgroundColor:'#000000',
        borderRadius:5
    },
    labelMsg:{
        fontSize:27/2,
        color:'#000000',
        marginLeft:13
    },
    judgmentImg:{
        marginLeft:17,
        height:25/2,
        width:25/2
    }
});
